<%--
    @author Kusal Samarakooni
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<script type="text/javascript">
    var occupierIndex = 0;
    $(function () {
        $('.deleteButton').val($('#delete').val());
        $('#occupier-info').hide();

        $('#addOccupier').val($('#add-occupier').val());

        /*(alienation.approveState.ordinal() == 1 || alienation.approveState.ordinal() == 3) && ((user.role.id == \"SC\")*/
        if (($('#approvalState').val() == "DATA_ENTRY" || $('#approvalState').val() == "REJECTED_BY_BO") &&  (  ($('#userRole').val() == 'SC') )  ) {
            $('#add-occupier-btn').hide();
        } else {
            $('#add-occupier-btn').show();
        }


        if (($('#approvalState').val() == "DATA_ENTRY" || $('#approvalState').val() == "REJECTED_BY_BO")) {
            var occupierCount = document.getElementById('occupierTable').rows.length;
            var count = 0;
            for (; count < occupierCount; count++) {
                addEncroachValidationRule(count);

            }
        }
    });

    function addRow() {

        var table = document.getElementById('occupierTable');
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var str = '<td colspan="4">' +
                '<fieldset>';
      /*  if ($('#alienationType').val() == unalienated) {
            str = str + '<legend><b><s:label value="%{getText('encroacher_details.label')}"/></b></legend>';
            str = str + '<table class="width-100">';
        } else {*/
            str = str + '<legend><b><s:label value="%{getText('occupier_details.label')}"/></b></legend>';
            str = str + '<table class="width-100">' +
                    '<tr><td>' + $("#occupierType").val() + '</td><td colspan="3"><input type="radio" name="alienation.occupiers[' + occupierIndex + '].type" value="1" checked/>' + $("#occupierLabel").val() + '&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="alienation.occupiers[' + occupierIndex + '].type" value="0"/> ' + $("#encroacherLabel").val() + '</td></tr>';
       /* }*/
        str = str + '<tr><td>' + $("#occupierName").val() + '<span class="mandatory-field"></span></td><td colspan="3"><s:textarea id="encroach-name'+occupierIndex+'" name="alienation.occupiers['+occupierIndex+'].name" rows="1" cssClass="width-595-px"/></td></tr>' +
                '<tr><td>' + $("#occupierDOB").val() + ' <s:label value="%{getText(\'date_format.label\')}" cssClass="date-format"/></td><td><s:textfield type="text" id="occupier-dob'+occupierIndex+'" name="alienation.occupiers['+occupierIndex +'].dateOfBirth" onKeyPress="return dateNumbersOnly(event,true)" onclick="selectDate(\"occupier-dob'+occupierIndex+'\")" cssClass="width-200-px"/></td><td>' + $("#occupierNIC").val() +
                '</td><td><s:textfield type="text" id="occupier-nic'+occupierIndex+'" name="alienation.occupiers[' + occupierIndex + '].registrationNumberOrNIC" cssClass="width-200-px"/></td></tr>' +
                '<tr><td>' + $("#occupierAddr").val() + '</td><td colspan="3"><s:textarea id="occupier-address'+occupierIndex+'" name="alienation.occupiers[' + occupierIndex + '].contacts.address" rows="1" cssClass="width-595-px"/></td></tr>' +
                '<tr><td>' + $("#contactNo").val() + '</td><td>' + $("#occupierMobile").val() + '</td><td colspan="2"><s:textfield type="text" id="occupier-mobile'+occupierIndex+'" name="alienation.occupiers[' + occupierIndex + '].contacts.mobile" cssClass="width-200-px" onKeyPress="return numbersonly(event,true)"/></td></tr>' +
                '<tr><td></td><td>' + $("#occupierLandPhone").val() + '</td><td colspan="2"><s:textfield type="text" id="occupier-land-phone'+occupierIndex+'" name="alienation.occupiers[' + occupierIndex + '].contacts.landPhone" cssClass="width-200-px" onKeyPress="return numbersonly(event,true)"/></td></tr>' +
                '<tr><td>' + $("#occupierEmail").val() + '</td><td><s:textfield type="text" id="occupier-email'+occupierIndex+'" name="alienation.occupiers[' + occupierIndex + '].contacts.email" cssClass="width-200-px"/></td><td>' + $("#occupierFax").val() +
                '</td><td><s:textfield type="text" id="occupier-fax'+occupierIndex+'" name="alienation.occupiers[' + occupierIndex + '].contacts.fax" cssClass="width-200-px" onKeyPress="return numbersonly(event,true)"/></td></tr>' +
                '<tr><td colspan="4" class="right-align"><input type="button" value="' + $("#delete").val() + '" onclick="deleteOccupier(' + occupierIndex + ')"/></td>' +
                '</table>' +
                '</fieldset>' +
                '</td>';
        row.innerHTML = str;
        row.setAttribute('id', 'row' + occupierIndex);
        addEncroachValidationRule(occupierIndex);
        occupierIndex++;
    }

    function deleteOccupier(id) {
        var table = document.getElementById('occupierTable');
        table.deleteRow($('#row' + id).index());
        //todo: remove this
        occupierIndex--;
    }

    function removeOccupier(occupierId) {
        var landId = $('#landId').val();
        var url = '${"removeOccupier.do?landId='+landId+'&occupierId='+occupierId+'"}';
        $.get(url, function (data) {
        });
    }

    function addEncroachValidationRule(id) {

        $('#encroach-name' + id).rules("add", {
            encroachName:true,
            messages:{
                encroachName: $('#enterEncroacherName').val()
            }
        });

        //DOB occupir
        $('#occupier-dob' + id).rules("add", {
            isDateFormated:true,
            isFeatureDate:true,
            messages:{
                ageValidate:$('#pls_enter_valid_age').val()}
        });

        //Mobile
        $('#occupier-mobile' + id).rules("add", {
            phoneNo:true,
            messages:{
                phoneNo:$('#pls_enter_valid_phone_no').val()}
        });


        //Land Line
        $('#occupier-land-phone' + id).rules("add", {
            phoneNo:true,
            messages:{
                phoneNo:$('#pls_enter_valid_phone_no').val()}
        });

        //Fax
        $('#occupier-fax' + id).rules("add", {
            phoneNo:true,
            messages:{
                phoneNo:$('#pls_enter_valid_fax_no').val()}
        });

        //E-mail
        $('#occupier-email' + id).rules("add", {
            email:true,
            messages:{
                email:$('#pls_enter_valid_email').val()}
        });


    }
</script>

<tr>
    <td colspan="4">
        <table id="occupierTable">
            <s:iterator status="status" value="alienation.occupiers">
                <tr id="<s:property value="%{'row' + (#status.count-1)}"/>">
                    <td colspan='4'>
                        <fieldset>
                          <%--  <legend><b><s:label value="%{getText('occupier_details.label')}"/></b></legend>--%>

                            <table class='width-100'>
                               <%-- <s:property value="user.role.id"  />--%>
                                <s:if test="(alienation.approveState.ordinal() == 1 || alienation.approveState.ordinal() == 3) && ((user.role.id == \"SC\"))">

                                    <s:hidden name="%{'alienation.occupiers['+( #status.count-1)+'].id'}"/>
                                    <s:hidden name="%{'alienation.occupiers['+( #status.count-1)+'].contacts.id'}"/>
                                </s:if>
                                <%--<s:if test="alienationType != @lk.icta.common.AppConstants@UN_ALIENATED">--%>
                                    <tr>
                                        <td><s:label value="%{getText('occupier_type.label')}"/> </td>
                                        <td colspan="2">

                                            <s:if test="(alienation.approveState.ordinal() == 1 || alienation.approveState.ordinal() == 3) && ((user.role.id == \"SC\"))">
                                                <s:radio name="%{'alienation.occupiers['+( #status.count-1)+'].type'}"
                                                                 list="#@java.util.HashMap@{'1':getText('occupier.label'),'0':getText('encroacher.label')}" />
                                            </s:if>
                                            <s:else>
                                                 <s:radio name="%{'alienation.occupiers['+( #status.count-1)+'].type'}"
                                                                 list="#@java.util.HashMap@{'1':getText('occupier.label'),'0':getText('encroacher.label')}" disabled="true"/>
                                            </s:else>
                                        </td>
                                    </tr>
                               <%-- </s:if>--%>

                                <tr>
                                    <td><s:label value="%{getText('name.label')}"/><span
                                            class="mandatory-field"></span></td>
                                    <td colspan='3'><s:textarea value="%{name}" cssClass="width-595-px"
                                                                disabled="%{isDisableMode()}"
                                                                rows="1"
                                                                id="%{'encroach-name'+( #status.count-1)}"
                                                                name="%{'alienation.occupiers['+( #status.count-1)+'].name'}"/></td>
                                </tr>
                                <tr>
                                    <td><s:label value="%{getText('date_of_birth.label')}"/></td>
                                    <td><s:textfield value="%{dateOfBirth}" disabled="%{isDisableMode()}"
                                                     cssClass="width-200-px"
                                                     id="%{'occupier-dob'+( #status.count-1)}"
                                                     name="%{'alienation.occupiers['+( #status.count-1)+'].dateOfBirth'}"
                                                     onKeyPress="return dateNumbersOnly(event,true)"/></td>

                                    <td><s:label value="%{getText('nic_registration_no.label')}"/></td>
                                    <td><s:textfield value="%{registrationNumberOrNIC}" disabled="%{isDisableMode()}"
                                                     name="%{'alienation.occupiers['+( #status.count-1)+'].registrationNumberOrNIC'}"/></td>
                                </tr>
                                <tr>
                                    <td><s:label value="%{getText('address.label')}"/></td>
                                    <td colspan='3'><s:textarea value="%{contacts.address}" cssClass="width-595-px"
                                                                disabled="%{isDisableMode()}" rows="1"
                                                                name="%{'alienation.occupiers['+( #status.count-1)+'].contacts.address'}"/></td>
                                </tr>
                                <tr>
                                    <td><s:label value="%{getText('contact_number.label')}"/></td>
                                    <td><s:label value="%{getText('mobile.label')}"/></td>
                                    <td colspan='2'><s:textfield value="%{contacts.mobile}"
                                                                 disabled="%{isDisableMode()}"
                                                                 cssClass="width-200-px"
                                                                 id="%{'occupier-mobile'+( #status.count-1)}"
                                                                 name="%{'alienation.occupiers['+( #status.count-1)+'].contacts.mobile'}"
                                                                 onKeyPress="return numbersonly(event,true)"/></td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td><s:label value="%{getText('land_line.label')}"/></td>
                                    <td colspan='2'><s:textfield value="%{contacts.landPhone}"
                                                                 disabled="%{isDisableMode()}"
                                                                 cssClass="width-200-px"
                                                                 id="%{'occupier-land-phone'+( #status.count-1)}"
                                                                 name="%{'alienation.occupiers['+( #status.count-1)+'].contacts.landPhone'}"
                                                                 onKeyPress="return numbersonly(event,true)"/></td>
                                </tr>
                                <tr>
                                    <td><s:label value="%{getText('contacts.email.label')}"/></td>
                                    <td><s:textfield value="%{contacts.email}" disabled="%{isDisableMode()}"
                                                     cssClass="width-200-px"
                                                     id="%{'occupier-email'+( #status.count-1)}"
                                                     name="%{'alienation.occupiers['+( #status.count-1)+'].contacts.email'}"/></td>
                                    <td><s:label value="%{getText('fax.label')}"/></td>
                                    <td><s:textfield value="%{contacts.fax}" disabled="%{isDisableMode()}"
                                                     cssClass="width-200-px"
                                                     id="%{'occupier-fax'+( #status.count-1)}"
                                                     name="%{'alienation.occupiers['+( #status.count-1)+'].contacts.fax'}"
                                                     onKeyPress="return numbersonly(event,true)"/></td>


                                </tr>
                                <tr>
                                    <s:if test="(alienation.approveState.ordinal() == 1 || alienation.approveState.ordinal() == 3) && ((user.role.id == \"SC\")) ">
                                        <td colspan="4" class="right-align"><s:submit type='button'
                                                                                  onclick="deleteOccupier('%{(#status.count-1)}');return false;"
                                                                                  value="%{getText('delete.label')}" />
                                            <script type="text/javascript">
                                                occupierIndex ++;
                                                // alert("improve child index " + childIndex)
                                            </script>
                                        </td>
                                     </s:if>
                                     <s:else>
                                         <td colspan="4" class="right-align"><s:submit type='button'
                                                                                  onclick="deleteOccupier('%{(#status.count-1)}');return false;"
                                                                                  value="%{getText('delete.label')}" disabled="true"/>
                                            <script type="text/javascript">
                                                occupierIndex ++;
                                                // alert("improve child index " + childIndex)
                                            </script>
                                        </td>
                                     </s:else>

                                </tr>

                            </table>
                        </fieldset>
                    </td>
                </tr>
            </s:iterator>
        </table>
    </td>
</tr>
<tr id="add-occupier-btn">
    <s:if test="%{isDisableMode()}" >
         <td colspan="4" class="right-align"><input id="addOccupier" type="button" onclick="addRow()" disabled="true" /></td>
    </s:if>
    <s:else>
        <td colspan="4" class="right-align"><input id="addOccupier" type="button" onclick="addRow()" /></td>
    </s:else>
</tr>

<s:hidden id="occupierName" value="%{getText('name.label')}"/>
<s:hidden id="occupierDOB" value="%{getText('date_of_birth.label')}"/>
<s:hidden id="occupierAddr" value="%{getText('address.label')}"/>
<s:hidden id="occupierNIC" value="%{getText('nic_registration_no.label')}"/>
<s:hidden id="contactNo" value="%{getText('contact_number.label')}"/>
<s:hidden id="occupierMobile" value="%{getText('mobile.label')}"/>
<s:hidden id="occupierLandPhone" value="%{getText('land_line.label')}"/>
<s:hidden id="occupierEmail" value="%{getText('email.label')}"/>
<s:hidden id="occupierFax" value="%{getText('fax.label')}"/>
<s:hidden id="delete" value="%{getText('delete.label')}"/>
<s:hidden id="add-encroacher" value="%{getText('add_encroacher.label')}"/>
<s:hidden id="add-occupier" value="%{getText('add_occupier.label')}"/>
<s:hidden id="encroacher" value="%{getText('encroacher_details.label')}"/>
<s:hidden id="occupier" value="%{getText('occupier_details.label')}"/>

<s:hidden id="occupierType" value="%{getText('occupier_type.label')}"/>
<s:hidden id="encroacherLabel" value="%{getText('encroacher.label')}"/>
<s:hidden id="occupierLabel" value="%{getText('occupier.label')}"/>

